<script setup lang="ts">
definePageMeta({
    layout: 'default-yellow',
    title: '充值详情',
    i18n: 'menu.rechargeDetails',
})
const { t } = useI18n();
const router = useRouter();
const arr = ref<any>([
    {
        id: 1,
        gold: 999999,
        time: '2023-04-16 12:24:00',
        status: '已到账',
        orderNumber: 'HXSDE121232435456' // 添加订单号字段
    }
])
const goDetails = () => {
    router.push('/recharge/details')
}
const copyOrderNumber = () => {
    const orderNumber = arr.value[0].orderNumber;
    navigator.clipboard.writeText(orderNumber)
    .then(() => {
            showSuccessToast(t("common.replicated"));
        })
        .catch(err => {
            showFailToast(t("common.replicatFail"));
        });
};
const goPush = (url: string) => {
    router.push(url)
};
</script>

<template>
    <div mx-auto text-16 text-dark dark:text-white>
        <div class="rounded-10 bg-#ffffff p-20">
            <div text-center xs text-40>$999999.00</div>
            <div class="flex justify-center items-center">
                <van-icon name="checked" class="color-#52c41a" />
                <div class="color-#707a95 text-12 ml-3">交易成功</div>
            </div>
            <div class="w-full h-1 bg-#f6f6f6 my-10"></div>
            <div>
                <div flex justify-between my-15>
                    <div class="color-#707a95"> {{t("recharge_page.details.transactions")}}</div>
                    <div> USTD</div>
                </div>
                <div flex justify-between my-15>
                    <div class="color-#707a95"> {{t("recharge_page.details.currency")}}</div>
                    <div> 缅甸币</div>
                </div>
                <div flex justify-between my-15>
                    <div class="color-#707a95"> {{t("recharge_page.details.state")}}</div>
                    <div> 已成功</div>
                </div>
                <div flex justify-between my-15>
                    <div class="color-#707a95"> {{t("recharge_page.details.time")}}</div>
                    <div> 2025-04-16 12：25：00</div>
                </div>
                <div flex justify-between my-15>
                    <div class="color-#707a95"> {{t("recharge_page.details.order")}}</div>
                    <div> HXSDE121232435456</div>
                </div>
            </div>
        </div>
        <div class="flex justify-between absolute bottom-70 left-0 right-0 px-15">
            <div class="w-165 bg-#f6f7ff text-center py-10 color-#6d788e text-14 border-1 border-#e2ecf4 rounded-5"
                @click="copyOrderNumber"> 复制订单号</div>
            <div class="w-165 bg-#f6f7ff text-center py-10 color-#6d788e text-14 border-1 border-#e2ecf4 rounded-5"
                @click="goPush('/custoService')">联系客服</div>
        </div>
    </div>
</template>
